<template>
  <div class="weGame-swiper">
    <a-carousel ref="swiper" :autoplaySpeed="10000" :after-change="afterChange" v-if="swiperFlag"  effect="fade">
      <div class="weGame-swiper-item" :key="item.child_position_id" v-for="(item,index) in list">
        <div v-if="item.__videoInfo.video_url">
          <video :ref="`video${index}`" style="width:100%;height:100%  " :src="item.__videoInfo.video_url" />
        </div>
        <div v-else>
          <img style="width:100%;height:100%" :src="item.__videoInfo.banner_img">
        </div>
        <div class="weGame-swiper-item-info">
          <div>
            {{item.__videoInfo.ad_description}}
          </div>
          <div class="weGame-swiper-item-info-center">
            <div class="weGame-swiper-item-info-center-mouth">
              口碑榜TOP <strong>{{item.__videoInfo.tpl_type}}</strong>
            </div>
            <div v-if="item.game.overall_positive_count > 500" class="weGame-swiper-item-info-good">{{item.game.overall_positive_count}}人好评</div>
          </div>
          <div>
            {{item.__priceInfo.current_price!=0 ? `¥${item.__priceInfo.current_price}`  : '免费开玩'}}
          </div>
        </div>
      </div>
    </a-carousel>
    <div class="weGame-swiper-box">
      <div @click="clickTap(i,item)" :class="[index == i ? 'active' :'']" class="weGame-swiper-box-items" :key="item.child_position_id" v-for="(item,i) in list">
        {{item.__videoInfo.activity_name ? item.__videoInfo.activity_name   :item.__msgInfo.game_name}}
      </div>
    </div>
  </div>

</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
} from "vue";
import { getSwiperList } from "@/server/api";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const ctx = getCurrentInstance(); //用这个代替this
    let list = reactive([]); //存放swiper list
    let swiperFlag = ref(false); //swiper加载完毕显示
    let index = ref(0); //swiper 回掉的index
    //读取接口数据
    const getList = async () => {
      try {
        const result = await getSwiperList();
        const $list = result?.prompt_list[0]?.prompts ?? [];
        $list.forEach((v) => {
          v.__videoInfo = JSON.parse(v.task.material_json_info);
          v.__msgInfo = JSON.parse(v.game.game_filter_info);
          v.__priceInfo = JSON.parse(v.game.game_price_info);
        });
        list.push(...$list);
        swiperFlag.value = true;
        console.log($list, 2);
      } catch (e) {
        message.error(e);
      }
    };
    //swiper 回掉
    const afterChange = (i) => {
      index.value = i;
      autoPlay(i);
    };
    //播放video
    const autoPlay = (index) => {
      const currentVideo = ctx.refs["video" + index];
      if (currentVideo) {
        list.forEach((_, i) => {
          if (ctx.refs["video" + i]) {
            ctx.refs["video" + i].pause();
            ctx.refs["video" + i].currentTime = 0;
          }
        });
        currentVideo.play();
        currentVideo.addEventListener("ended", () => {
          currentVideo.play();
        });
      }
    };
    //点击右边的文字切换到对应的swiper
    const clickTap = (i) => {
      index.value = i;
      ctx.refs.swiper.goTo(i);
    };
    //mounted
    onMounted(async () => {
      await getList();
    });

    return {
      list,
      swiperFlag,
      index,
      afterChange,
      clickTap,
    };
  },
});
</script>

<style scoped lang="less">
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 420px;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
.weGame-swiper {
  position: relative;
  overflow: hidden;
  height: 420px;
  background-color: black;
  &-item {
    position: relative;
    height: 420px;
    overflow: hidden;
    &-info {
      position: absolute;
      bottom: 20px;
      left: 20px;
      color: white;
      &-center {
        display: flex;
        align-items: center;
        margin-top: 15px;
        &-mouth {
          color: #ffc107;
          width: 100px;
          padding: 3px 0;
          box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 20%);
          border-radius: 4px;
          margin-right: 10px;
          background-color: rgba(0,0,0,.4);
        }
      }
      &-good {
        background-color: rgba(0,0,0,.4);
        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 20%);
        width: 100px;
        padding: 3px 0;
        border-radius: 4px;
      }
      & > div:first-child {
        white-space: pre-wrap;
        font-size: 18px;
        text-align: left;
      }
      & > div:last-child {
        text-align: left;
        font-size: 14px;
        margin-top: 15px;
      }
    }
  }
  &-box {
    position: absolute;
    right: 0px;
    top: 0;
    display: flex;
    flex-direction: column;
    bottom: 0px;
    background: rgba(15, 15, 35, 0.2);
    height: 100%;
    .active {
      background-color: rgb(75, 74, 74);
      // color: black;
      transition: all .5s;
      opacity: .8;
      color: #fff;
    }
    &-items {
      flex: 1;
      color: hsla(0, 0%, 100%, 0.8);
      text-align: left;
      padding: 10px 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-weight: 700;
    }
  }
}
</style>